<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <el-divider></el-divider>
      <!-- <div class="search">
            <div class="search">

                <div style="display: flex;">
                    <div class="whead">
                        <div style="display: flex; ">
                            <div style="width: 100px;">操作人员:</div>
                            <el-select v-model="types" placeholder="全部" @change="typesChange(types)">
                                <el-option v-for="item in Type" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>

                    </div>

                    <div class="whead" style="margin-left: 20px;">
                        <div>操作日期:</div>
                        <el-select v-model="staty" placeholder="全部" @change="statusChange(staty)">
                            <el-option v-for="item in statu" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
        </div> -->
      <!-- 数据列表 -->
      <div class="lists">
        <div class="list">
          <div>
            <img
              class="list-img"
              src="../../../assets/images/查询数据列表.png"
              alt=""
            />
          </div>
          <div>
            数据列表
          </div>
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table border :data="listData" style="width: 100%" align="center">
          <el-table-column
            prop="accountId"
            label="编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="accountName"
            label="操作者"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="updateTime"
            label="操作日期"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ipAddress"
            label="IP地址"
            align="center"
          ></el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; ">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { loginRecordPage } from "@/api/user";
export default {
  data() {
    return {
      dialogVisible: false,
      tabPosition: 'left',
      input: "", //搜索
      fishName: "", //鱼苗名称搜索
      principal: "", //负责人搜索
      city: "", //城市搜索
      staty: "", //水库状态
      loading: false,
      types: "",
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: -1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      form: {
        name: "",
        userName: "",
        email: "",
        logPassword: "",
        verifyPassword: "",
        describe: "",
        accounts: ""
      },
      Type: [],
      statu: []
    };
  },
  created() {
    this.loginRecordPage(this.pageSize, this.currentPage);
  },
  methods: {
    //   成员分页
    async loginRecordPage(limit, page) {
      let params = {
        limit: this.pageSize,
        page: this.currentPage
      };
      let result = await loginRecordPage(params);
      if (result.code == 0) {
        this.listData = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
      }
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.loginRecordPage(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loginRecordPage(this.pageSize, this.currentPage);
    },
    //  输入搜索
    btnchange(e) {
      this.searchContent = e;
      this.loginRecordPage(this.pageSize, this.currentPage);
    },
    // 输入搜索
    typesChange(e) {
      this.types = e;
    },
    accountChange(e) {
      this.departmentIds = e;
    },
    // 所属部门
    statusChange(e) {
      this.departmentId = e;
      this.loginRecordPage(this.pageSize, this.currentPage);
    },
    search() {},
    // 跳转到添加水库页面
    addEvent() {
      // this.$router.push('addReservoir')
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .search[data-v-1c1a5e1d] {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 80px;
  margin: 0 20px;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  z-index: 0;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
  width: 100px;
}

::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

.lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  // display: flex;
  align-items: center;
  // height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}

.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}
</style>
